<template>
  <div class="data-container">
    <div class="cont">
      <ShowGauge></ShowGauge>
      <ShowRadar></ShowRadar>
      <ShowScatter></ShowScatter>
      <ShowLine></ShowLine>
      <ShowPie></ShowPie> 
      <ShowBar></ShowBar>
      <!-- <ShowChina></ShowChina> -->
    </div>
  </div>
</template>

<script>

// 内部 按需引入
import ShowPie from './components/ShowPie.vue'
// 内部 完全引入
import ShowBar from './components/ShowBar.vue'

import ShowLine from './components/ShowLine.vue'
import ShowScatter from './components/ShowScatter.vue'
import ShowRadar from './components/ShowRadar.vue'
import ShowGauge from './components/ShowGauge.vue'
import ShowChina from './components/ShowChina.vue'

export default {
  components: {
    ShowPie,
    ShowBar,
    ShowLine,
    ShowScatter,
    ShowRadar,
    ShowGauge,
    ShowChina,
  },
  data() {
    return { };
  },
  mounted(){ },
  methods: { },
};
</script>

<style lang="scss">
@media only screen and (max-width: 840px) {
  .data-container{
    display: flex;
    justify-content: center;
  }
}
@media only screen and (min-width: 840px) {
  .data-container{
    .cont{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
.data-container{
  width: 100%;
  height: 100%;
  .cont{
    margin: 20px auto;
    max-width: 1000px;
  }
}
.echarts-container{
  width: 400px;
  height: 400px;
  position: relative;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  margin:30px 10px;
  overflow: hidden;
  .echarts-content{
    width: 100%;
    height: 100%;
  }
}

</style>
